<template>
  <div>
    <!-- item -->
    <div class="fights_item">
      <el-row class="fights_item_heard" @click.native="isShow = !isShow">
        <el-col :span="8" class="item_info">
          <div>
            {{dataList.airline_name}}
            {{dataList.flight_no}}
          </div>
        </el-col>
        <el-col :span="8" class="item_time">
          <div class="time_left">
            <p>{{dataList.dep_time}}</p>
            <span>{{dataList.org_airport_name}} {{dataList.org_airport_quay}}</span>
          </div>
          <div class="time_center">
            <p>{{subtractTime(dataList)}}</p>
          </div>
          <div class="time_right">
            <p>{{dataList.arr_time}}</p>
            <span>{{dataList.dst_airport_name}} {{dataList.dst_airport_quay}}</span>
          </div>
        </el-col>
        <el-col :span="8" class="item_money">
          <div>
            ￥
            <span class="money_color">{{dataList.seat_infos[0].settle_price_child}}</span>起
          </div>
        </el-col>
      </el-row>
      <!-- item son -->

      <el-collapse-transition>
        <div class="item_son" v-show="isShow">
          <el-row>
            <el-col :span="4" class="fights_son_recommend">
              <div class="low_recommend">低价推荐</div>
            </el-col>
            <el-col :span="20" class="fights_son_seat">
              <div class="seat_item" v-for="(seat,index) of dataList.seat_infos" :key="index">
                <!-- :class="{seat_son_No:!item.isShow,
                           seat_son_Yes:item.isShow
                }"-->
                <div class="seat_left">
                  <p>
                    <em>{{seat.name}}</em>
                    <i>|</i>
                    {{seat.supplierName}}
                  </p>
                </div>
                <div class="seat_right">
                  <div class="seat_money">￥ {{seat.par_price}}</div>
                  <!-- 选定 -->
                  <div class="seat_choice">
                    <el-button type="warning" size="small" class="choice_btn" @click="goOrder(seat)">选定</el-button>
                    <p>
                      剩余 :
                      <span>{{seat.discount}}</span>
                    </p>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-transition>
      <!-- item son -->
    </div>
    <!-- item -->
  </div>
</template>

<script>
export default {
  props: ["dataList"],
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    // 前往订单页
    goOrder(seat) {
      // console.log('seat: ', seat.seat_xid);
      //   console.log('id: ', this.dataList.id);
        const seat_xid = seat.seat_xid;
        const id = this.dataList.id
        this.$router.push({
          path:'/air/order',
          query:{
            id,seat_xid
          }
        })
    }
  },
  computed: {
    subtractTime() {
      return function(item) {
        // 出发时间
        const dep = item.dep_time.split(":");
        // 抵达时间
        const arr = item.arr_time.split(":");
        // 小时
        let hour = arr[0] - dep[0];
        // 分钟
        let minute = arr[1] - dep[1];
        if (hour < 0) {
          hour += 24;
        }
        if (minute < 0) {
          minute += 60;
          hour -= 1;
        }

        return hour + "小时" + minute + "分";
      };
    }
  }
};
</script>

<style lang="less" scoped>
// 遍历信息
.fights_item {
  border: 1px solid #dddddd;
  margin: 10px 0;
  .fights_item_heard {
    cursor: pointer;
    height: 80px;

    .item_info,
    .item_money {
      line-height: 80px;
      text-align: center;
    }
    .item_time {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time_left,
      .time_right {
        text-align: center;
        p {
          font-size: 24px;
        }
        span {
          font-size: 12px;
          color: #999;
        }
      }
      .time_center {
        p {
          color: #999;
          font-size: 14px;
          padding-bottom: 10px;
          border-bottom: 1px solid #999;
        }
      }
    }
    .item_money {
      .money_color {
        padding: 0 8px;
        color: orange;
        font-size: 24px;
      }
    }
  }
}
// seat 子遍历数据
.item_son {
  width: 100%;
  overflow: hidden;
  background: #f6f6f6;
  position: relative;
  // 左边低价推荐
  .fights_son_recommend {
    height: 1px;
    .low_recommend {
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%);
    }
  }
  // 右边
  .fights_son_seat {
    .seat_item {
      // height: 70px;
      // transition: 1s;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .seat_left {
        font-size: 12px;
        em {
          color: #008000;
        }
        i {
          padding: 0 5px;
        }
      }
      .seat_right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .seat_money {
          margin-right: 70px;
          font-size: 20px;
          color: orange;
        }
        .seat_choice {
          width: 75px;
          padding-right: 25px;
          padding-top: 10px;
          .choice_btn {
          }
          p {
            padding-top: 10px;
            font-size: 14px;
            span {
              padding: 0 5px;
            }
          }
        }
      }
    }
  }
}
</style>